<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>

    <%--    添加业主--%>
    <meta charset="utf-8">
    <title>物业管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layuiadmin/style/admin.css" media="all">

    <style>
        .notice-btn{
            display: flex;
            justify-content: space-between;
        }

        /*添加页面*/
        #selectBox {
            display: flex;
        }

        #updateHiddenBox {
            position: absolute;
            left: 10%;
            top: 10%;
            display: none;
            width: 80%;
            height: 80%;
            margin: auto;
            background-color: #FAFAFA;

        }

        #updateMainBox {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgba(67, 67, 67, .5);

        }

        #addHiddenBox {
            position: absolute;
            left: 10%;
            top: 10%;
            display: none;
            width: 80%;
            height: 80%;
            margin: auto;
            background-color: #FAFAFA;

        }

        #addMainBox {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgba(67, 67, 67, .5);

        }

        .layui-upload-list {
            display: block;
            margin: 10px 0;
            width: 102px;
            height: 102px;
            border: black 1px solid;
        }

        #demo1{
            display: block;
            width: 102px;
            height: 102px;
        }
        /**/

    </style>


</head>
<body>

<table class="layui-hide" id="noticeList" lay-filter="noticeList"></table>


<div id="addMainBox">
    <div id="addHiddenBox">
        <form class="layui-form" > <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
            <div class="layui-form-item" style="text-align: center">
                <%--                <label class="layui-form-label">标题</label>--%>
                <div class="layui-input-block">
                    <input type="text" name="title" placeholder="请输入维修业务" autocomplete="off" class="layui-input">
                </div>
            </div>
<%--            <input type="text" name="content" style="display: none" id="content" class="layui-input">--%>
<%--            <div class="layui-form-item layui-form-text">--%>
<%--                &lt;%&ndash;                <label class="layui-form-label">公告</label>&ndash;%&gt;--%>
<%--                <div class="layui-input-block">--%>
<%--                    <div id="wangEditor">--%>
<%--                        &lt;%&ndash;                        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>&ndash;%&gt;--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--            &lt;%&ndash;            <button type="button" id="btn">获取内容</button>&ndash;%&gt;--%>
            <div class="layui-form-item">
                <label class="layui-form-label">选择框</label>
                <div class="layui-input-block">
                    <select name="city" lay-verify="required">
                        <option value=""></option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit lay-filter="noticeBtn">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    <button type="button" class="layui-btn layui-btn-primary" id="addReturnWindows">返回</button>
                </div>
            </div>
        </form>
    </div>
</div>




<%--按钮样式展示--%>
<%--<button type="button" class="layui-btn layui-btn-fluid notice-btn" style="width: 100%">--%>
<%--    <span style="line-height: 200%">2020-2-1</span>--%>
<%--</button>--%>

<%--<a href="${pageContext.request.contextPath}/notice/viewNotice?id=1">i安吉</a>--%>
<script src="${pageContext.request.contextPath}/wangEditor/js/wangEditor.min1.js"></script>
<script src="${pageContext.request.contextPath}/layuiadmin/layui/layui.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            $ = layui.$,
            admin = layui.admin,
            laydate = layui.laydate
            ,upload = layui.upload
        var E = window.wangEditor
        var editor = new E("#wangEditor")
        // 或者 const editor = new E(document.getElementById('div1'))




        // 配置 server 接口地址
        editor.config.uploadImgServer = '${pageContext.request.contextPath}/file/wangUpload';

        editor.config.uploadFileName = 'file';



        // 默认情况下，显示所有菜单
        editor.config.menus = [
            'head',
            'bold',
            'fontSize',
            'fontName',
            'italic',
            'underline',
            'strikeThrough',
            'indent',
            'lineHeight',
            'foreColor',
            'backColor',
            'link',
            'list',
            'todo',
            'justify',
            'quote',
            'emoticon',
            'image',
            // 'video',
            'table',
            'code',
            'splitLine',
            'undo',
            'redo',
        ]

        editor.config.uploadImgHooks = {
            // 上传图片之前
            // before: function(xhr) {
            //     console.log(xhr)
            //
            //     // 可阻止图片上传
            //     return {
            //         prevent: true,
            //         msg: '需要提示给用户的错误信息'
            //     }
            // },
            // 图片上传并返回了结果，图片插入已成功
            success: function(xhr) {
                // console.log('success', xhr);
                $("#content").val(editor.txt.html());
                // console.log(editor.txt.html());
            },
            // // 图片上传并返回了结果，但图片插入时出错了
            // fail: function(xhr, editor, resData) {
            //     console.log('fail', resData)
            // },
            // // 上传图片出错，一般为 http 请求的错误
            // error: function(xhr, editor, resData) {
            //     console.log('error', xhr, resData)
            // },
            // // 上传图片超时
            // timeout: function(xhr) {
            //     console.log('timeout')
            // },
            // // 图片上传并返回了结果，想要自己把图片插入到编辑器中
            // // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
            // customInsert: function(insertImgFn, result) {
            //     // result 即服务端返回的接口
            //     console.log('customInsert', result)
            //
            //     // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
            //     insertImgFn(result.data[0])
            // }
        }

        editor.create();

        $("#btn").click(function () {
            var html = editor.txt.html();
            console.log(html)
        })

        //打印富文本内容
        // $(".notice-btn").click(function (d) {
        //     console.log(1);
        //     console.log(d);
        // })

        // function template(d){
        //     var html = '';
        //     html += '<button ';
        //     html += 'data-num=';
        //     html += d.id;
        //     html += ' type="button" ';
        //     html += ' class="layui-btn layui-btn-fluid notice-btn" style="width: 100%"> ';
        //     html += '<span style="line-height: 200%">';
        //     html += d.title;
        //     html += '</span>';
        //     html += '<span style="line-height: 200%">';
        //     html += d.createTime;
        //     html += '</span>';
        //     html += '</button>';
        //     return html;
        //
        // }
        <%--<a href="${pageContext.request.contextPath}/notice/viewNotice?id=1">i安吉</a>--%>
        function template(d){
            var html = '';
            html += '<a ';
            html += 'href=';
            html += '${pageContext.request.contextPath}/notice/viewNotice?id=';
            html += d.id;
            html += ' class="notice-btn" style="width: 100%"> ';
            html += '<span style="line-height: 200%">';
            html += d.title;
            html += '</span>';
            html += '<span style="line-height: 200%">';
            html += d.createTime;
            html += '</span>';
            html += '</a>';
            return html;

        }

        /*自定义表格模板*/
        function updateRepairStatus(data) {
            var html = ""
            if (data.repairStatus == '未完成') {
                html += '<span style="color: #c00;">未完成</span>';
            } else if (data.repairStatus == '已完成') {
                html += '<span style="color: #ffd185;">已完成</span>';
            } else if (data.repairStatus == '维修人员作废') {
                html += '<span style="color: #ffd109;">维修人员作废</span>';
            } else if (data.repairStatus == '维修人员维修完成') {
                html += '<span style="color: #0fff05;">维修人员维修完成</span>';
            } else if (data.repairStatus == '业主确认完成') {
                html += '<span style="color: #0a19ff;">业主确认完成</span>';
            } else if (data.repairStatus == '正在维修') {
                html += '<span style="color: #0482ff;">正在维修</span>';
            } else if (data.repairStatus == '业主否认完成') {
                html += '<span style="color: #ff7a47;">业主否认完成</span>';
            } else {
                html += '<span style="color: #fd10ff;">业主作废</span>';
            }
            return html;
        }

        /*自定义表格模板*/
        function userImg(data) {
            // console.log(data);
            var html = '';
            html += '<img src="';
            html += data.imgPath;
            html += '"'
            html += ' class = "userImgPath"';
            html += '/>';
            return html;
        }

        //第一个实例
        var notice = table.render({
            elem: '#noticeList'
            // ,height: 312
            ,url: '${pageContext.request.contextPath}/property/propertyList' //数据接口
            , request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            }
            , toolbar: 'default',
            page: true,
            limits: [10, 15, 20]
            ,cols: [[ //表头
                // {
                //     field: 'imgPath', title: '头像', width: 60, templet: function (d) {
                //         return userImg(d)
                //     }
                // },
                {type: 'checkbox', fixed: 'left'},
                {field: 'userName', title: '姓名', width: 130}
                , {field: 'userPhone', title: '业主电话', width: 130}
                , {field: 'repairType', title: '维修类型', width: 130}
                , {
                    field: 'repairStatus', title: '维修状态', width: 160, templet: function (d) {
                        return updateRepairStatus(d)
                    }
                }
                , {field: 'repairDescribe', title: '维修描述', width: 160}
                , {field: 'repairPicturePath', title: '维修状态修改描述', width: 160}
                , {field: 'apartmentName', title: '房间名称', width: 130}
                , {field: 'engineerName', title: '物业维修人员名称', width: 150}
                , {field: 'engineerCode', title: '维修人员编码', width: 130}
                , {field: 'repairPhone', title: '维修人员电话', width: 130}
                , {field: 'createTime', title: '创建时间', width: 130}
                , {field: 'updateTime', title: '更新状态时间', width: 130}
            ]]
        });

        form.on('submit(noticeBtn)', function(data){
            var data = data.field
            // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            // console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            // return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            $.ajax({
                url: "${pageContext.request.contextPath}/notice/insertNotice",
                type: "post",
                data: JSON.stringify(data),
                contentType: 'application/json',
                processDate: false,
                success: function (res) {
                    console.log("success");
                    console.log(res);
                    if (res.code == 0){
                        location.href = "${pageContext.request.contextPath}/notice/notice";
                    }else {
                        layer.msg(res.msg);
                    }
                    // userListTable.reload();
                    return;
                }
            })

        });



        //头部工具栏监听事件
        table.on('toolbar(noticeList)', function (obj) {
            // console.log("**********************")
            // console.log(obj);
            // console.log("**********************")
            // var checkStatus = table.checkStatus(obj.config.id);
            // console.log(checkStatus);
            var checkStatus = table.checkStatus('noticeList');
            var checkedData = checkStatus.data
            console.log(checkStatus)
            switch (obj.event) {
                case 'add':

                case 'delete':
                    // layer.msg('删除');
                    if (checkedData.length < 1) {
                        layer.msg("请选择数据后在操作");
                        return;
                    }
                    var ids = '';
                    var id = "";
                    for (var i = 0; i < checkedData.length; i++) {
                        var notice = checkedData[i];
                        ids += notice.id;
                        ids += ',';
                    }

                    id = ids.substring(0, ids.length - 1)

                    layer.confirm('真的要删除么', function (index) {
                        if (index > 0) {
                            $.ajax({
                                url: "${pageContext.request.contextPath}/property/deleteProperty?id=" + id,
                                type: "get",
                                success: function (res) {
                                    console.log("success");
                                    console.log(res);
                                    if (res.code == 0) {
                                        table.reload('noticeList', {
                                        });
                                    } else {
                                        layer.msg(res.msg);
                                    }
                                    // userListTable.reload();
                                    return;
                                }
                            })
                            layer.close(index);
                        }
                    })
                    break;
                case 'update':
                    layer.msg('编辑');
                    break;
            }
            ;
        });


        /*关闭添加页面*/
        $("#addReturnWindows").click(function addReturnWindows() {
            $("#addMainBox").css("display", "none");
            $("#addHiddenBox").css("display", "none");
        })

    });
</script>
</body>
</html>
